<template>
  <div ref="chartMap1" style="width: 100%; height: 100%"></div>
  <a-modal
    :mask="false"
    v-model:open="isDetailModalShow"
    destroyOnClose
    class="jlw-model"
    width="396px"
    :footer="null"
    centered
    @cancel="handleDetailModalCancel"
  >
    <template #closeIcon>
      <img width="14" src="../../../assets/images/screen/close.png" alt="" />
    </template>
    <template #title>
      <div class="side-title">
        <div class="side-title-text">
          <img width="14" src="../../../assets/images/screen/side-title-icon.png" alt="" />&nbsp;<span class="font-size16">区县化解率</span>
        </div>
        <div>
          <!-- <span class="side-title-date font-12">2023.05-2023.09.15</span> -->
        </div>
      </div>
    </template>
    <div class="p-4">
      <VideoPlayer :src="currentVideoUrl" />
      <!-- <video-player :videoUrl="currentVideoUrl" :autoplay="true" /> -->
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch, nextTick, Ref, computed, defineAsyncComponent } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { useSrceenStore } from '/@/store/modules/srceen';
  import mapIMg from '@/assets/images/screen/map2.png';
  import mapBg from '@/assets/images/screen/map.png';
  import yellowBg from '@/assets/images/screen/yellow-bg.png';
  import redBg from '@/assets/images/screen/red-bg.png';
  import dwBg from '@/assets/images/screen/dw-bg.png';
  interface ChartData {
    name: string;
    value?: number;
    // 可以根据需要添加更多属性
  }
  export default defineComponent({
    name: 'EchartsMap',
    components: {
      VideoPlayer: defineAsyncComponent(() => import('./VideoPlayer.vue')),
    },
    props: {
      info: {
        type: Array as () => ChartData[],
        default: () => [],
        required: true,
      },
      loading: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      const chartMap1 = ref<HTMLDivElement | null>(null);
      const currentVideoUrl = ref('https://media.wxzxzj.com/the_garden_of_words_trailer_english__1080p.m3u8');
      const { echarts, setOptions, getInstance } = useECharts(chartMap1 as Ref<HTMLDivElement>);
      const aspectScale = 0.8807505292367753;
      const srceenStore = useSrceenStore();
      const mapGeoJson = computed(() => {
        return srceenStore.getGeoJsonCode;
      });
      const getMapGeoJson = async () => {
        if (!mapGeoJson.value) {
          await srceenStore.actionGeoJsonCode();
        }
        const geoData = JSON.parse(mapGeoJson.value);
        getInstance()?.hideLoading();
        echarts.registerMap('XF', geoData);
        initChart();
      };
      const shadowLayer = {
        // 阴影层
        id: 'shadowLayer',
        map: 'XF',
        zlevel: 7,
        silent: true,
        // projection: "none",
        // projection: "mercator",
        aspectScale: aspectScale,
        zoom: 1.2, // 初始缩放比例
        itemStyle: {
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#C1FFF9',
          borderWidth: 6,
          // shadowBlur: 12,
          // shadowColor: "rgba(0,0,0,0.5)",
          // shadowOffsetX: 5,
          // shadowOffsetY: 5,
        },
      };
      const shadowLayer2 = {
        // 阴影层
        id: 'shadowLayer2',
        map: 'XF',
        zlevel: 6,
        silent: true,
        // top: 89,
        // left: 70,
        // offset: [13, 3],
        // projection: "mercator",
        aspectScale: aspectScale,
        zoom: 1.2, // 初始缩放比例
        itemStyle: {
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#30B8A3',
          borderWidth: 4,
          shadowBlur: 2,
          shadowColor: '#30B8A3',
          shadowOffsetX: 1,
          shadowOffsetY: 4,
        },
      };
      const shadowLayer3 = {
        // 阴影层
        id: 'shadowLayer3',
        map: 'XF',
        zlevel: 5,
        silent: true,
        // top: 93,
        // left: 73,
        // projection: "mercator",
        aspectScale: aspectScale,
        zoom: 1.2, // 初始缩放比例
        itemStyle: {
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#056456',
          borderWidth: 4,
          shadowBlur: 2,
          shadowColor: '#056456',
          shadowOffsetX: 1,
          shadowOffsetY: 8,
        },
      };

      const shadowLayer4 = {
        // 阴影层
        id: 'shadowLayer4',
        map: 'XF',
        zlevel: 4,
        silent: true,
        // top: 96,
        // left: 76,
        // projection: "mercator",
        aspectScale: aspectScale,
        zoom: 1.2, // 初始缩放比例
        itemStyle: {
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#053F36',
          borderWidth: 4,
          shadowBlur: 2,
          shadowColor: '#053F36',
          shadowOffsetX: 1,
          shadowOffsetY: 12,
        },
      };
      const shadowLayer5 = {
        // 阴影层
        id: 'shadowLayer5',
        map: 'XF',
        zlevel: 3,
        silent: true,
        // top: 99,
        // left: 79,
        // projection: "mercator",
        aspectScale: aspectScale,
        zoom: 1.2, // 初始缩放比例
        itemStyle: {
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#132530',
          borderWidth: 4,
          shadowBlur: 2,
          shadowColor: '#132530',
          shadowOffsetX: 1,
          shadowOffsetY: 16,
        },
      };
      const initChart = () => {
        setOptions(
          {
            backgroundColor: 'transparent',
            tooltip: {
              trigger: 'item',
              formatter: (e: any) => {
                return `${e.name}<br/>${e.value || 0}`;
              },
            },
            geo: [
              // shadowLayer,
              // shadowLayer2,
              // shadowLayer3,
              // shadowLayer4,
              shadowLayer5,
              {
                id: 'textureLayer',
                show: true,
                map: 'XF',
                itemStyle: {
                  areaColor: {
                    image: mapBg, // 支持 base64、网络路径
                    repeat: 'repeat', // 自动平铺填充区域
                  },
                  borderColor: 'rgba(126, 245, 246, 1)', // 边框颜色
                  borderWidth: 1, // 边框宽度
                },
                zoom: 1.2, // 初始缩放比例
                // scaleLimit: {
                //   // 新增缩放范围限制
                //   min: 1,
                //   max: 3,
                // },
                zlevel: 8,
                // projection: "mercator",
                aspectScale: aspectScale,
                emphasis: {
                  // 禁用默认高亮
                  itemStyle: {
                    areaColor: {
                      image: mapBg, // 支持 base64、网络路径
                      repeat: 'repeat', // 自动平铺填充区域
                    },
                  },
                  label: {
                    show: false,
                    color: '#fff',
                  },
                },
              },
              {
                id: 'highlightLayer',
                show: true,
                map: 'XF',
                label: {
                  show: false,
                  fontSize: 14,
                  color: '#fff',
                },
                zoom: 1.2, // 初始缩放比例
                itemStyle: {
                  areaColor: 'rgba(255,255,255,0)', // 初始透明
                  borderColor: 'rgba(0,0,0,0)',
                },
                emphasis: {
                  // 禁用默认高亮
                  itemStyle: {
                    areaColor: {
                      type: 'linear', // 线性渐变
                      x: 0,
                      y: 0, // 起点坐标（0~1）
                      x2: 0,
                      y2: 1, // 终点坐标（0~1）
                      colorStops: [
                        {
                          offset: 0,
                          color: '#C6EEFD', // 起始颜色
                        },
                        {
                          offset: 1,
                          color: '#63FFAE', // 结束颜色
                        },
                      ],
                      global: false, // 缺省为 false，表示相对于坐标系
                    },
                  },
                  label: {
                    show: false,
                    color: '#fff',
                  },
                },

                zlevel: 10,
                // projection: "mercator",
                aspectScale: aspectScale,
                regions: [],
              },
            ],
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo', // 绑定地理坐标系
                data: [
                  {
                    name: '网约房区域视频监控',
                    value: [119.836013, 30.496577],
                    bgImage: 'yellowBg',
                    type: '1',
                    symbol:
                      'image://',
                    symbolSize: [37, 76], // 图标大小
                  },
                  {
                    name: '人像监控预警',
                    value: [119.815884, 28.010659],
                    bgImage: 'redBg',
                    type: '2',
                    symbol:
                      'image://',
                    symbolSize: [37, 76], // 图标大小
                  },
                  {
                    name: '海宁县',
                    value: [119.315884, 29.010659],
                    bgImage: 'dwBg',
                    num: 1230,
                    symbol:
                      'image://',
                    symbolSize: [37, 76], // 图标大小
                  },
                ],

                zlevel: 12,

                // 标签配置
                label: {
                  show: true,
                  formatter: function (params) {
                    return `{${params.data.bgImage}|${params.data.name}${params.data.num || ''}}`; // 使用富文本格式
                  },
                  position: 'top',
                  align: 'center',
                  distance: 5,
                  rich: {
                    redBg: {
                      backgroundColor: {
                        image: redBg, // 标签背景图
                      },
                      fontSize: 14,
                      height: 20,
                      width: '100%',
                      borderRadius: 0,
                      color: '#fff',
                      padding: [2, 20, 0, 20],
                    },
                    yellowBg: {
                      backgroundColor: {
                        image: yellowBg, // 标签背景图
                      },
                      fontSize: 14,
                      height: 20,
                      width: '100%',
                      borderRadius: 0,
                      color: '#fff',
                      padding: [2, 20, 0, 20],
                    },
                    dwBg: {
                      backgroundColor: {
                        image: dwBg, // 标签背景图
                      },
                      fontSize: 19,
                      height: 29,
                      width: 170,
                      borderRadius: 0,
                      align: 'left', // 水平靠左
                      verticalAlign: 'middle', // 垂直居中
                      color: '#fff',
                      padding: [2, 0, 0, 40],
                    },
                    // 动态颜色样式
                    highColor: {
                      color: '#5CA1FF', // 高数值显示红色
                      fontSize: 19,
                      align: 'left',
                      verticalAlign: 'middle',
                      fontWeight: 'bold',
                    },
                  },
                },
              },
            ],
            // visualMap: {
            //   type: 'piecewise',
            //   textStyle: {
            //     color: '#fff',
            //   },
            //   realtime: false,
            //   showLabel: true,
            //   orient: 'horizontal',
            //   itemHeight: 8,
            //   itemWidth: 30,
            //   right: 0,
            //   bottom: 0,
            //   inRange: {
            //     color: ['rgba(78,218,171,1)', 'rgba(38,95,220,1)', 'rgba(254,224,107,1)', 'rgba(255,97,97,1)'],
            //   },
            //   pieces: [
            //     { min: 0, max: 10, label: '>0' },
            //     { min: 11, max: 20, label: '>10' },
            //     { min: 21, max: 50, label: '>20' },
            //     { min: 51, label: '>50' },
            //   ],
            // },
            // geo3D: {
            //   backgroundColor: 'transparent', // 或 'rgba(0, 0, 0, 0)'
            //   // environment: 'transparent', // 环境透明
            //   groundPlane: {
            //     show: false,
            //     color: 'transparent',
            //   },
            //   itemStyle: {
            //     opacity: 1,
            //     // color: '#002689',
            //     // borderColor: '#0059FF', // 红色边框
            //     // borderWidth: 1, // 边框宽度为 2 像素
            //   },
            //   realisticMaterial: {
            //     detailTexture: mapIMg, // 设置纹理贴图
            //     textureTiling: 1, // 纹理平铺方式（1为拉伸，数字表示平铺次数）
            //     roughness: 0.6,
            //     metalness: 0.1,
            //   },
            //   map: 'XF',
            //   //shading: 'lambert',
            //   shading: 'realistic', // 启用真实感着色
            //   light: {
            //     main: {
            //       intensity: 5,
            //       shadow: true,
            //       shadowQuality: 'high',
            //       alpha: 30,
            //     },
            //     ambient: {
            //       intensity: 0,
            //     },
            //     selectedMode: 'single', // 允许单选
            //     select: {
            //       itemStyle: {
            //         opacity: 0, // 默认状态下的选中层隐藏
            //       },
            //     },
            //   },
            //   viewControl: {
            //     alpha: 40, // 俯仰角：40度
            //     beta: 30, // 方位角：30度
            //     distance: 100, // 相机距离地图中心的距离
            //     rotateSensitivity: 1, // 旋转灵敏度
            //     zoomSensitivity: 1, // 缩放灵敏度
            //     autoRotate: true, // 开启自动旋转
            //     autoRotateSpeed: 10, // 自动旋转速度
            //   },
            //   postEffect: {
            //     enable: true,
            //     bloom: {
            //       enable: false,
            //     },
            //     SSAO: {
            //       radius: 1,
            //       intensity: 1,
            //       enable: true,
            //     },
            //     depthOfField: {
            //       enable: false,
            //       focalRange: 10,
            //       blurRadius: 10,
            //       fstop: 1,
            //     },
            //   },
            //   temporalSuperSampling: {
            //     enable: true,
            //   },
            //   regionHeight: 2,
            // },
            // // series: [
            //   {
            //     name: '消防数据图',
            //     zoom: 1.1,
            //     type: 'map',
            //     map: 'XF',
            //     aspectScale: 1.2,
            //     label: {
            //       show: false,
            //     },
            //     itemStyle: {
            //       areaColor: '#fff',
            //       borderColor: '#091F53',
            //       borderWidth: 6,
            //       borderJoin: 'round',
            //       borderCap: 'round',
            //     },
            //     emphasis: {
            //       label: {
            //         show: false,
            //       },
            //     },
            //     select: {
            //       label: {
            //         show: false,
            //       },
            //     },
            //     data: props.info,
            //   },
            // ],
          },
          true
        );
      };
      //#region 详情
      const isDetailModalShow = ref(false);
      function handleDetailModalCancel() {
        //isDetailModalShow.value = false;
      }

      function handleDetailModalOpen() {
        isDetailModalShow.value = true;
      }
      const handleScatterClick = (params) => {
        // 示例：显示点击位置信息
        console.log('点击坐标:', params.event.event.clientX, params.event.event.clientY);

        // 示例：获取数据项
        const clickedData = params.data;
        console.log('点击数据:', clickedData);

        // 打开弹窗
        isDetailModalShow.value = true;
      };
      //#endregion

      onMounted(() => {
        nextTick(() => {
          if (echarts) {
            getInstance()?.showLoading({ maskColor: 'rgba(0, 0, 0, 0.3)', color: '#1890FF', textColor: '#fff' });
            getMapGeoJson();
            // 绑定点击事件
            getInstance()?.on('click', (params: any) => {
              // 判断点击的是否为散点系列
              if (params.componentType === 'series' && params.seriesType === 'scatter') {
                if (params?.data?.type == '1' || params?.data?.type == '2') {
                  handleScatterClick(params);
                }
              }
            });
          }
        });
      });

      watch(
        () => props.loading,
        () => {
          if (!props.loading) {
            return;
          }
          //TODO
          initChart();
        }
      );
      return {
        chartMap1,
        isDetailModalShow,
        handleDetailModalCancel,
        handleDetailModalOpen,
        currentVideoUrl,
      };
    },
  });
</script>

<style lang="less" scoped>
  /* 样式保持不变 */
</style>
